interface User {
  name: string;
  age: number;
  role: string;
}

function UserCard({ name, role, age }: User) {
  return (
    <div
      style={{
        border: "1px solid #ccc",
        padding: "20px",
        margin: "10px",
        borderRadius: "8px",
        backgroundColor: "#f9f9f9",
      }}
    >
      <h3>姓名: {name}</h3>
      <p>年龄: {age}</p>
      <p>职位: {role}</p>
      {/* 简单的逻辑：如果是 Manager，显示特殊标记 */}
      {role === "Manager" && <span style={{ color: "red" }}>★ 管理员</span>}
    </div>
  );
}

export default function HomePage() {
  return (
    <div style={{ padding: "40px" }}>
      <h1>员工列表</h1>
      <UserCard name="张三" role="Developer" age={18} />
      <UserCard name="李四" role="Developer" age={20} />
      <UserCard name="王五" role="Manager" age={22} />
    </div>
  );
}
